import React from 'react'
import {Animated, Easing, Text, TextInput, ToastAndroid, TouchableOpacity, View} from "react-native";
import Style from "../../common/style";
import Title from "../component/title";

export default class AnimatedPage extends React.Component {

    render() {
        return (
            <View>
                <Title title={'Animated'}/>
                <View style={{padding:10}}>
                    {
                        this.createSimpleAnimView()
                    }
                    {
                        this.createInterpolateAnimView()
                    }
                    {
                        this.createOrderAnimView()
                    }
                    {
                        this.createTogetherAnimView()
                    }
                    {
                        this.createLoopAnimView()
                    }
                    {
                        this.createSpringAnimView()
                    }
                </View>
            </View>
        )
    }

    createSimpleAnimView() {
        //联合
        const fadeAnim = new Animated.Value(0);
        const widthAnim = Animated.multiply(fadeAnim, 300);
        const anim = Animated.timing(  // 随时间变化而执行的动画类型
            fadeAnim,   //动画中的变量值
            {
                toValue: 1,   //透明度最终变为1，即完全不透明
                // easing:Easing.back,
                duration: 2000,
                // useNativeDriver: true,
            }
        ).start();

        return (
            <Animated.View style={[Style.button, {opacity: fadeAnim, width: widthAnim}]}>
                <Text>
                    简单动画
                </Text>
            </Animated.View>
        )
    }

    createInterpolateAnimView() {
        //插值
        const opacity = new Animated.Value(0);
        const width = opacity.interpolate({
            inputRange: [0, 0.1, 0.5, 1],
            outputRange: [100, 120, 280, 300]
        });
        const anim = Animated.timing(opacity, {
            toValue: 1,
            duration: 2000,
        }).start();

        return (
            <Animated.View style={[Style.button, {opacity: opacity, width: width}]}>
                    <Text>
                        插值动画
                    </Text>
            </Animated.View>
        )
    }

    createOrderAnimView() {
        const opacity = new Animated.Value(0);
        const width = new Animated.Value(100);

        Animated.sequence([
            Animated.timing(opacity, {
                toValue:1,
                duration:2000,
            }),
            Animated.delay(1000),  // 有点像 sleep
            Animated.timing(width, {
                toValue:300,
                duration:2000,
            })
        ]).start();

        return (
            <Animated.View style={[Style.button, {opacity: opacity, width: width}]}>
                <Text>
                    顺序延迟动画
                </Text>
            </Animated.View>
        )
    }

    createTogetherAnimView(){
        const opacity = new Animated.Value(0);
        const width = new Animated.Value(100);

        Animated.parallel([
            Animated.timing(opacity, {
                toValue:1,
                duration:2000,
            }),
            Animated.timing(width, {
                toValue:300,
                duration:2000,
            })
        ]).start();

        return (
            <Animated.View style={[Style.button, {opacity: opacity, width: width}]}>
                <Text>
                    同时执行动画
                </Text>
            </Animated.View>
        )

        //延迟启动
        // Animated.stagger(1000, [
        //     Animated.timing(opacity,  {
        //         ...
        //     })
        //     Animated.timing(width,  {
        //         ...
        //     })
        // ]).start()
    }

    createLoopAnimView() {
        const width = new Animated.Value(100);
        Animated.loop(
            Animated.timing(width, {
                toValue: 300,
                duration: 2000,
                isInteraction: false,
            })
        ).start();

        return (
            <Animated.View style={[Style.button, {width: width}]}>
                <Text>
                    循环动画
                </Text>
            </Animated.View>
        )
    }


    createSpringAnimView() {

        const opacity = new Animated.Value(1);
        const springValue = new Animated.Value(0.7);
        Animated.stagger(2000, [
            Animated.timing(opacity, {
                toValue: 1,
                duration: 2000,
                isInteraction: false,
            }),
            Animated.spring(
                springValue,
                {
                    toValue: 1,
                    friction: 2,
                    tension: 10,
                }
            )
        ]).start();

        return (
            <Animated.View style={[Style.button, {transform: [{scale: springValue}]}]}>
                <Text>
                    弹性动画
                </Text>
            </Animated.View>
        )
    }
}
